<template>
  <div id='tmpl'>
        <div class="mui-content" style="background-color:#fff">
		    <ul class="mui-table-view mui-grid-view">
		        <li class="mui-table-view-cell mui-media mui-col-xs-6" v-for="(item,index) in list" :key="index">
		            <router-link v-bind="{to:'/goods/goodsinfo/'+item.id}">
		                <img class="mui-media-object" :src="item.img_url">
		                <div class="mui-media-body">{{item.title}}</div>
                        <div class="desc">
                            <p>
                                <span>￥{{item.sell_price}}</span>
                                <s>￥2017</s>
                            </p>
                            <div>
                                <div class="mui-pull-left">热卖中</div>
                                <div class="mui-pull-right">剩余{{item.stock_quantity}}件</div>
                            </div>
                        </div>        
                        </router-link>
                </li>
		    </ul>
		</div>
  </div>
</template>
<script>
import {Toast} from "mint-ui"
export default {
  name: "component_name",
  data() {
    return {
        list: []
    };
  },
  created(){
      this.getgoodsList();
  },
  methods:{
      getgoodsList(){
          var url=`${this.$common.apidomain}/api/getgoods?pageindex=1`
          this.$http.get(url).then(res=>{
              console.log(res)
              var data=res.body;
              if(data.status!=0){
                  Toast(data.message);
                  return 
              }
              this.list=data.message;
          })
      }
  }
};
</script>
<style lang="css" scoped>
    .mui-content .mui-table-view li{
        box-sizing: border-box;
        padding: 4px;
    }
    .mui-content .mui-table-view .mui-table-view-cell a{
        -weblit-box-shadow: 0 0 4px #000;
        -moz-box-shadow: 0 0 4px #000;
        -ms-box-shadow: 0 0 4px #000;
        box-shadow: 0 0 4px #000;
        border: 1px solid #ccc;
        margin: 0px;
        padding: 0;
    }
    .mui-table-view.mui-grid-view{
        padding: 2px;
    }
    .mui-table-view.mui-grid-view .mui-table-view-cell{
        margin-right: 0;
    }
    .desc {
        margin-top: 10px;
        height: 60px;
        background-color: rgba(0,0,0,.1);
        padding: 5px;
        font-size: 14px;
    }
    .desc p{
        text-align: left;
    }
    .desc p span{
        color: red;
    }
    .desc p s{
        margin-left: 20px;
    }
    .desc>div{
        margin-top: 10px;
    }
</style>   